<template>
    <div>
        <div class="mg-content">
             <el-row :gutter="20">
                <el-col :span="6">
                     <el-input size="medium" v-model="input" @keyup.enter.native="keyDown($event)" placeholder="请输入名称" :maxlength="20"></el-input>
                </el-col>
                <el-col :span="6">
                    <div class="el-input el-input-group el-input-group--prepend">
                        <div class="el-input-group__prepend">状态</div>
                        <el-select v-model="state" filterable placeholder="请选择状态" size="medium" class="w-100p">
                        <el-option
                            v-for="item in states"
                            :key="item.key"
                            :label="item.text"
                            :value="item.key">
                        </el-option>
                        </el-select>
                    </div>
                </el-col>
                <el-col :span="6">
                  <div class="el-input el-input-group el-input-group--prepend el-input--medium">
                    <div class="el-input-group__prepend" tabindex="-1">所属区域</div>
                    <el-cascader placeholder="请选择所属类别" class="el-cascader-margin w-100p" size="medium"
                                 :options="treeData"
                                 :show-all-levels="false" v-model="downCategeryId"
                                 change-on-select>
                    </el-cascader>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div  class="text-left">
                    <el-button type="primary" size="medium" class="btn-info"  icon="el-icon-search" @click="search">搜索</el-button>
                    <el-button type="primary" size="medium"  class="btn-warning" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                  </div>
                </el-col>
            </el-row>
          <div class="title-buttons">
            <el-button v-hasPermission="'management_employee:create'" class="title-button btn-primary" size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新建人员&nbsp;</el-button>
          </div>
                <el-table
                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     :cell-class-name="getTableCellClassName"
                     :header-cell-class-name="getTableHeaderCellClassName"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="员工名称">
                        <template  slot-scope="scope">
                            <span>{{scope.row.name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="用户账号">
                        <template  slot-scope="scope">
                          <el-button type="text" size="medium" style="margin: 0px;" @click="isAccount=true;activityId=scope.row.id,isEdit=true" v-if="scope.row.account_id!=null">{{scope.row.account_name}}</el-button>
                            <!--<span v-if="scope.row.account_name" >{{scope.row.account_name}}</span>-->
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="所属区域">
                        <template  slot-scope="scope">
                            <span>{{scope.row.district_name}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="所属角色">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.roles">{{scope.row.roles}}</span>
                          <span v-else>----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="性别">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.gender=='MAN'">男</span>
                          <span v-if="scope.row.gender!='MAN'">女</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="电话">
                        <template  slot-scope="scope">
                            <span>{{scope.row.phone}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作人">
                        <template  slot-scope="scope">
                          <span v-if="scope.row.operator_name">{{scope.row.operator_name}}</span>
                            <span v-else>-----</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作时间">
                        <template  slot-scope="scope">
                            <span>{{scope.row.create_at}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="人员状态">
                        <template  slot-scope="scope">
                            <span v-if="scope.row.state=='NORMAL'">正常</span>
                          <span v-else>禁用</span>
                        </template>
                    </el-table-column>
                     <!--<el-table-column-->
                             <!--label="修改" width="70">-->
                         <!--<template  slot-scope="scope">-->
                                <!--<span class="icon icon-xiugai-copy table-icon" @click="addShow=true;activityId=scope.row.id"></span>-->
                         <!--</template>-->
                     <!--</el-table-column>-->
                     <!--<el-table-column-->
                              <!--label="删除" width="70">-->
                          <!--<template  slot-scope="scope">-->
                            <!--<span class="icon icon-delete table-icon" @click="handleDelete(scope.$index,scope.$index,scope.row.id)"></span>-->
                          <!--</template>-->
                     <!--</el-table-column>-->
                  <el-table-column
                    label="操作" width="240">
                    <template slot-scope="scope" >

                      <el-button v-hasPermission="'management_employee:update'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >修改 | </el-button>
                      <el-button v-hasPermission="'management_employee:allocationAccount'" type="text" size="small" style="margin: 0px;" @click="isAccount=true;activityId=scope.row.id,idEdit=false" v-if="scope.row.account_id==null">分配账号 | </el-button>
                      <el-button v-hasPermission="'management_employee:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if="scope.row.state && scope.row.state=='DISABLED'" >启用</el-button>
                      <el-button v-hasPermission="'management_employee:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if="scope.row.state && scope.row.state=='NORMAL'" >停用</el-button>
                     <!-- <el-button @click="handleDelete(scope.$index,scope.$index,scope.row.id)"
                                 type="text" size="small"
                      >删除</el-button>-->
                    </template>
                  </el-table-column>
                </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <model :isShow="addShow" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
      <account :isShow="isAccount" :id="activityId" :isEdit="isEdit"  v-on:close="addClose1" v-on:addSuccess="addSuccess1"></account>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    import account from './account.vue'
    export default{
        data(){
            return {
              isEdit:false,
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                addShow:false,
                activityId:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
              treeData:[],
              downCategeryId:[],
              states:[],
              state:"",
              isAccount:false,


            }
        },
        components: {
           model,
          account
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
          newLabel(newList) {
            if (newList) {
              for (var i = 0; i < newList.length; i++) {
                newList[i].label = newList[i].name;
                newList[i].value = newList[i].id + "";
                if (newList[i].children.length == 0) {
                  newList[i].children = null;
                } else {
                  for (var s = 0; s < newList[i].children.length; s++) {
                    newList[i].children[s].label = newList[i].children[s].name;
                    newList[i].children[s].value = newList[i].children[s].id + "";
                    newList[i].children[s].children = null;
                  }
                }
              }
            }
          },
          updateState(id,item){
            var st='停用';
            if(item==1){
              st='停用';
            }else{
              st='启用';
            }
            this.$confirm('确定将状态改为'+st+', 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.get("organization/employees/updateState?id="+id).then(data => {
                if(data.success){
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  });
                  this.initData();
                }else{
                  this.$message({
                    type: 'error',
                    message: data.message
                  });
                }

              })

            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消修改状态'
              // });
            });

          },
          getTableCellClassName(){
            return "table_cell_style";
          },
          getTableHeaderCellClassName(){
            return "table_header_cell_style";
          },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.state="";
                this.downCategeryId=[];
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
              var search="";
              if(this.input!=""){
                search="search.name_like="+this.input+"&"+search;
              }
              if(this.state!=''){
                search="search.state_eq="+this.state+"&"+search;
              }
              if(this.downCategeryId.length>0){
                search="search.districtId_eq="+this.downCategeryId[this.downCategeryId.length - 1]+"&"+search;
              }
              this.loading=true;
              this.$axios.get("organization/employees?"+search).then((data)=>{
                this.loading=false
                this.tableData=data.content.employeePage.content;
                this.total=data.content.employeePage.totalElements;
              }).catch(function(err){
              })
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                this.loading=true;
                this.$axios.get("organization/employees?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue).then((data)=>{
                    this.loading=false;
                  this.loading=false
                  this.tableData=data.content.employeePage.content;
                  this.total=data.content.employeePage.totalElements;
                  this.states=data.content.states;
                  var tree = data.content.districts;
                  console.log(tree);
                  this.newLabel(tree);
                  this.treeData = tree;
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("organization/employees/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            addSuccess(item){
                this.addShow=false;
                this.initData();
            },
            addClose(){
              this.isEdit=false;
                this.addShow=false;
            },
          addClose1(){
            this.isEdit=false;
            this.isAccount=false;
          },
          addSuccess1(item){
            this.isAccount=false;
            this.initData();
          },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
        }
    }
</script>
<style scoped>

</style>
